<template>
  <!-- 主导航栏组件 -->
  <div class="navbar">
    <!-- 左侧品牌标识 -->
    <div class="brand">
      <router-link>
        <img src="@/assets/images/logo.png" class="logo" />
      </router-link>
    </div>

    <!-- 主导航 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <!--遍历父菜单-->
      <template v-for="menu in menuList" :key="menu.index">
        <el-sub-menu :index="menu.index">
          <!--父菜单-->
          <template #title>{{ menu.title }}</template>
          <!--1. 判断是否是 HOME 菜单，做特殊多列平铺处理-->
          <div v-if="menu.title === 'HOME' || menu.title === 'PORTFOLIO'" class="home-multi-column multi-column-menu">
              <!--遍历子菜单-->
              <el-menu-item
                v-for="(subItem, idx) in menu.subItems"
                :key="idx"
                :index="`home-${idx}`"
              >
                <!--子菜单-->
                {{ subItem.title }}
              </el-menu-item>
          </div>
          <!--2. 其他菜单（SHOP、BLOG 等）原多列渲染逻辑-->
          <div v-else class="multi-column-menu">
            <el-menu
              v-for="(column, colIndex) in menu.columns"
              :key="colIndex"
              class="submenu-column"
              mode="vertical"
              :default-active="activeIndex"
            >
              <!-- 列标题 -->
              <el-menu-item :index="`shop-col-${colIndex}`" class="column-title">
                {{ column.title }}
              </el-menu-item>
              <!-- 列子项 -->
              <el-menu-item
                v-for="(item, idx) in column.items"
                :key="idx"
                :index="`shop-${colIndex}-${idx}`"
              >
                {{ item }}
              </el-menu-item>
            </el-menu>
          </div>
        </el-sub-menu>
      </template>
    </el-menu>

    <!-- 右侧组件 -->
    <div class="right">
      <el-icon><Search /></el-icon>
      <el-icon><Handbag /></el-icon>
      <el-icon><Fold /></el-icon>
    </div>
  </div>

</template>

<script setup>
import { ref } from 'vue'
import { Search, Handbag, Fold } from '@element-plus/icons-vue'
// HOME子下拉
import homeData from '@/components/navbar/homeData.js'
// SHOP子下拉
const shopColumns = ref([
  {
    title: 'SHOP LAYOUT',
    items: [
      'Full Width',
      'Sidebar Left',
      'Sidebar Right',
      'Grid View',
      'List View',
      'Infinite Scrolling',
      'Off-Canvas Filter',
      'Shop Categories',
      'Small Categories',
      'Cookie Notice',
    ],
  },
  {
    title: 'SHOP PAGES1',
    items: [
      'Shop Variations',
      'Gallery on Products',
      'Catalog Mode',
      'Load More',
      'Shop Masonry',
      'Animation Shop',
      'Lazyload Products',
      'Shop Carousel',
      'Columns 4',
      'Columns 5',
    ],
  },
  {
    title: 'SHOP PAGES2',
    items: [
      'Categories',
      'Shopping Cart',
      'My Account',
      'Checkout',
      'Wishlist',
      'Filter Top',
      'Vertical Gallery',
      'Without Background',
      'Product Hover Ver2',
      'Product Hover Ver3',
    ],
  },
  {
    title: 'PRODUCT STYLE',
    items: [
      'Shop Variations',
      'Gallery on Products',
      'Catalog Mode',
      'Load More',
      'Shop Masonry',
      'Animation Shop',
      'Lazyload Products',
      'Shop Carousel',
      'Columns 4',
      'Columns 5',
    ],
  },
  {
    title: 'VENDOR',
    items: [
      'Shop Variations',
      'Gallery on Products',
      'Catalog Mode',
      'Load More',
      'Shop Masonry',
      'Animation Shop',
      'Lazyload Products',
      'Shop Carousel',
      'Columns 4',
      'Columns 5',
    ],
  },
])
// BLOG子下拉
const blogColumns = ref([
  {
    title: 'MASONRY LAYOUT',
    items: [
      'Masonry 2 Columns',
      'Masonry 3 Columns',
      'Masonry - Left Sidebar',
      'Masonry - Right Sidebar',
    ],
  },
  {
    title: 'GRID LAYOUT',
    items: [
      'Grid Layout 2 Columns',
      'Blog Layout 3 Columns',
      'Blog Grid - Left Sidebar',
      'Blog Grid - Right Sidebar',
    ],
  },
  {
    title: 'BLOG TIMELINE',
    items: [
      'Timeline - Full Width',
      'Timeline - 2 Columns',
      'Timeline - Right Sidebar',
      'Timeline - Left Sidebar',
    ],
  },
  {
    title: 'SIMPLE POST',
    items: [
      'Video Fomat Vimeo',
      'Video Format Youtube',
      'Audio Format',
      'Image Format',
      'Quote Format',
      'Gallery Format',
    ],
  },
  {
    title: 'BLOG CLASSIC',
    items: [
      'Classic - Full Width',
      'Classic - Left Sidebar',
      'Classic - Right Sidebar',
      'Classic - Post with Image',
      'Classic - Image',
      'Classic - No Sidebar',
    ],
  },
  {
    title: 'BLOG STANDARD',
    items: ['Standard - Right Sidebar', 'Standard - Left Sidebar', 'Standard - No Sidebar'],
  },
])
// PAGESS子下拉
const pagesColumns = ref([
  {
    title: 'ABOUT US',
    items: ['About Us 01', 'About Us 02', 'About Us 03', 'About Us 04', 'About Us 05'],
  },
  {
    title: 'CONTACT US',
    items: ['Contact Us 01', 'Contact Us 02', 'Contact Us 03', 'Contact Us 04', 'Contact Us 05'],
  },
  {
    title: 'COMING SOON',
    items: [
      'Coming Soon 01',
      'Coming Soon 02',
      'Coming Soon 03',
      'Coming Soon 04',
      'Coming Soon 05',
    ],
  },
  {
    title: 'FAQ',
    items: ['FAQ 01', 'FAQ 02', 'FAQ 03', 'FAQ 04', 'FAQ 05'],
  },
  {
    title: 'SERVICES',
    items: ['Service 01', 'Service 02', 'Service 03', 'Service 04', 'Service 05'],
  },
  {
    title: 'ERROR 404',
    items: ['Error 404 01', 'Error 404 02', 'Error 404 03', 'Error 404 04', 'Error 404 05'],
  },
])
// console.log(homeData)
// 定义菜单数据
/**HOME一维数组（所有子项无额外分组） shop，blog等二维数组（子项按 columns 分组）*/
const menuList = ref([
  {
    index: '1',
    title: 'HOME',
    subItems:homeData
  },
  {
    index: '2',
    title: 'SHOP',
    columns: shopColumns.value,
  },
  {
    index: '3',
    title: 'BLOG',
    columns: blogColumns.value,
  },
  {
    index: '4',
    title: 'PAGES',
    columns: pagesColumns.value,
  },
  {
    index: '5',
    title: 'PORTFOLIO',
    subItems: [
      { index: '5-1', title: 'Portfolio2 Columns' },
      { index: '5-2', title: 'Portfolio3 Columns' },
      { index: '5-3', title: 'Portfolio4 Columns' },
      { index: '5-4', title: 'Portfolio Standard' },
      { index: '5-5', title: 'Portfolio2 Gallery' },
      { index: '5-6', title: 'Portfolio2 FUllwidth' },
      { index: '5-7', title: 'Portfolio2 Single Left' },
    ],
  },
])

const activeIndex = ref('1')

const handleSelect = () => {
  // console.log(key, keyPath);
};
</script>

<style scoped lang="scss">
// 导航栏
.navbar {
  height: 100px;
  display: flex;
  align-items: center;
  .brand {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .logo {
      object-fit: contain;
    }
  }
  .right {
    width: 15%;
    display: flex;
    justify-content: flex-end;
  }
}
:deep(.el-sub-menu__icon-arrow) {
  display: none !important;
}
.el-icon {
  margin-left: 10px !important;
}
.el-menu-demo {
  width: 55%;
  border-bottom: none !important;
}

/*HOME容器*/
.home-multi-column {
  flex-wrap: wrap !important;
  background: #fff;
  border: none !important;
}
.home-multi-column .el-menu-item {
  width: 180px; /* 每列宽度，可根据需求调整 */
  white-space: nowrap;/* 文字不换行 */
}
/* 多列菜单容器 */
.multi-column-menu {
  display: flex;
  flex-wrap: nowrap;
  padding: 20px;
  min-width: 800px; /* 根据内容调整 */
}
/* 每列菜单 */
.submenu-column {
  flex: 1;
  min-width: 180px; /* 每列最小宽度 */
  margin-right: 20px;
  border: none !important;
}

/* 列标题样式 */
:deep(.el-menu-item.column-title) {
  font-weight: bold !important;
  color: #333 !important;
  background-color: #f5f7fa !important;
  padding: 0 20px !important;
  height: 36px !important;
  line-height: 36px !important;
  margin-bottom: 10px !important;
}

/* 子菜单项样式 */
:deep(.el-menu-item) {
  padding: 0 20px !important;
  height: 32px !important;
  line-height: 32px !important;
  color: #606266 !important;
}

/* 鼠标悬停效果 */
:deep(.el-menu-item:hover) {
  background-color: #BEAE59 !important;
}

/* 覆盖 Element UI 默认样式 */
:deep(.el-submenu__popper) {
  padding: 0 !important;
}
</style>
